<template>
  <view v-if="showBg" :style="{ height: height }" class="top_bg"></view>
  <view
    class="status_bar fs_18"
    :style="{
      backgroundColor: bgcolor,
      paddingTop: paddingTop + 'px',
      paddingBottom: paddingBottom + 'px',
      color: color,
    }">
    <uni-icons
      v-if="showBack"
      class="back"
      @tap="goback"
      :type="iconType"
      :color="color"
      size="20px" />
    {{ title }}
    <view v-if="showStash" class="my_Stash">
      <view class="box">
        <image
          @tap="my_Stash = !my_Stash"
          class="mini_Icon"
          src="@/static/img/other/more.png" />
        <view @tap="goStashPage" class="box_item" :class="{ active: my_Stash }">
          <image
            class="mini_Icon"
            src="@/static/img/other/wearhouse-list.png"
            mode="scaleToFill" />
          <view class="fs_14 color_black">我的仓库</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useHomeStore } from "@/stores/modules/home";
const homeStore = useHomeStore();
const my_Stash: any = ref(false);
let iconType: any = ref("left");
defineProps({
  title: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#fff",
  },
  bgcolor: {
    type: String,
    default: "",
  },
  showBack: {
    type: Boolean,
    default: false,
  },
  path: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "100%",
  },
  paddingTop: {
    type: String,
    default: "0",
  },
  paddingBottom: {
    type: String,
    default: "14",
  },
  showBg: {
    type: Boolean,
    default: true,
  },
  showStash: {
    type: Boolean,
    default: false,
  },
});
const goback = () => {
  uni.navigateBack({
    delta: 1,
  });
};
const goStashPage = () => {
  homeStore.openStashDrawer = true;
  uni.reLaunch({
    url: "/pages/index/index",
  });
};
</script>

<style lang="scss" scoped>
.top_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #3c8967, #88bfa8bd, #f5f7fb);
  z-index: 0;
}
.status_bar {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  .back {
    position: absolute;
    left: 10px;
    bottom: 0px;
    z-index: 2;
  }
  .my_Stash {
    position: absolute;
    right: 20px;
    bottom: 0px;
    z-index: 2;
    .box {
      position: relative;
      .box_item {
        width: 103px;
        height: 63px;
        position: absolute;
        display: flex;
        align-items: center;
        top: 10px;
        right: 100%;
        justify-content: center;
        border-radius: 10px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        /* bg/纯白 */
        background: rgb(255, 255, 255);
        image {
          margin-right: 6px;
        }
        transform: scale(0);
        &.active {
          transform: scale(1);
          transform: 0.3s ease-in-out;
        }
      }
    }
  }
}
</style>
